<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Dev</title>
</head>
<!-- <script src="../../../node_modules/echarts/dist/echarts.min.js"></script> -->

<script src="../../../node_modules/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
<script src="../../../node_modules/element-ui/lib/index.js"></script>
<script src="../static/js/index.js"></script>
<script src="../../../node_modules/echarts/dist/echarts.js"></script>

<script src="../../../node_modules/@jiaminghi/data-view/dist/datav.min.vue.js"></script>


<style>
    .footer {
        position: relative;
    }
    
    #x1 {
        position: absolute;
        border: 1px solid red;
        width: 800px;
        left: 50%;
        transform: translate(-50%, 0%);
    }
    
    @media (min-width: 1400px) {
        .container-xxl,
        .container-xl,
        .container-lg,
        .container-md,
        .container-sm,
        .container {
            max-width: 1880px;
        }
    }
</style>

<body>
    <div id="app">
        <div class="container">
            <div class="row">
                <div class="col" style="width: 800px; height: 300px; border: 1px solid;">
                    <dv-scroll-board :config="config" style="width:500px;height:220px" />
                </div>
                <div class="col" style="width: 800px; height: 300px; border: 1px solid;">
                    Column1
                </div>
                <div class="col" style="width: 800px;height: 300px; border: 1px solid;">
                    Column3
                </div>
            </div>
        </div>
        <div class="footer">
            <div id="x1">
                <el-table :data="tableData" height="300" border style="width: 350px" ref="table">
                    <el-table-column prop="date" label="日期" width="120">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <div>
            <h3 style="color: rgba(0, 0, 0, 0.5);">echarts</h3>
            <div id="echarts_i" style="height: 500px; width: 500px;"></div>
        </div>

    </div>


    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    config: {
                        header: ['列1', '列2', '列3'],
                        headerBGC: "#f24300",
                        data: [
                            ['行1列1', '行1列2', '行1列3'],
                            ['行2列1', '行2列2', '行2列3'],
                            ['行3列1', '行3列2', '行3列3'],
                            ['行4列1', '行4列2', '行4列3'],
                            ['行5列1', '行5列2', '行5列3'],
                            ['行6列1', '行6列2', '行6列3'],
                            ['行7列1', '行7列2', '行7列3'],
                            ['行8列1', '行8列2', '行8列3'],
                            ['行9列1', '行9列2', '行9列3'],
                            ['行10列1', '行10列2', '行10列3']
                        ],
                    },
                    // 表格数据
                    tableData: [{
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-08',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-06',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-07',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }],
                    option: {
                        title: {
                            text: '某站点用户访问来源',
                            left: 'center',
                        },
                        tooltip: {
                            // trigger: 'item'
                        },
                        // legend: {
                        //     top: '5%',
                        //     // orient: 'vertical',
                        //     left: 'left',
                        //     textStyle: { //图例文字的样式1
                        //         color: '#12f0e9 ',
                        //         // fontSize: 16
                        //     },
                        // },
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [{
                                value: 1048,
                                name: '搜索引擎'
                            }, {
                                value: 735,
                                name: '直接访问'
                            }, {
                                value: 580,
                                name: '邮件营销'
                            }, {
                                value: 484,
                                name: '联盟广告'
                            }, {
                                value: 300,
                                name: '视频广告'
                            }],
                            itemStyle: {
                                normal: {
                                    label: {
                                        textStyle: { // 用 itemStyle.normal.label.textStyle.fontSize 來更改餅圖上項目字體大小
                                            fontSize: 20
                                        }
                                    }
                                },
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    },
                }
            },
            mounted() {
                // 拿到表格挂载后的真实DOM1
                const table = this.$refs.table
                    // 拿到表格中承载数据的div元素
                const divData = table.bodyWrapper
                    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
                setInterval(() => {
                    // 元素自增距离顶部1像素
                    divData.scrollTop += 1
                        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                    if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                        // 重置table距离顶部距离
                        divData.scrollTop = 0
                    }
                }, 100)
                var chartDom = document.getElementById('echarts_i');
                var myChart = echarts.init(chartDom);
                myChart.setOption(this.option);
                console.debug(this.option.series[0].data);
                // 获取数据 this.option.series[0].data
                this.option.series[0].data = []



            }
        })
    </script>
</body>

</html>